@charset "utf-8";
.latest { margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between;}

.latest header {width:25%;}
.latest header #tit h3 {font-size:48px; text-align:left; font-weight:800;}
.latest header #tit h3 a {color:#fff;}
.latest header #tit p {font-size:18px; line-height:28px; color:#fff; opacity:0.7; margin:20px 0 60px; word-break:keep-all;}

.latest header .button-area {display:flex;}
.latest header .button-next, .latest header .button-prev {display:inline-block; font-family:'S-CoreDream'; width:60px; height:60px; line-height:58px; font-size:22px; font-weight:400; text-align:center; color:#fff; border-radius:50%; border:1px solid #fff; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; cursor:pointer;}
.latest header .button-next:hover, .latest header .button-prev:hover {background:#b199ff; border-color:#b199ff;}
.latest header .button-prev {margin-right:10px;}

.latest .swiper-container {width:70%; padding:0px; margin:0; overflow:hidden;}
.latest .swiper-container .swiper-slide {width:50%; padding:0; position:relative;}
.latest .swiper-container .swiper-slide .product .img_area {background-color:#000; overflow:hidden; text-align:center; }
.latest .swiper-container .swiper-slide .product img {max-width:100%; max-height:100%; margin:0 auto; opacity:1;  filter:grayscale(100%);
transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transform: scale(1);transform: scale(1);}
.latest .swiper-container .swiper-slide .product:hover {background:#000;}
.latest .swiper-container .swiper-slide .product:hover img {opacity:1; -webkit-transform:scale(1.1); transform: scale(1.1); filter:grayscale(0%);}

.latest .swiper-container .swiper-slide {position:relative;}
.latest .swiper-container .swiper-slide .txt_area {width:100%; height:100px; line-height:100px; position:absolute; bottom:-100px; text-align:center; background:rgba(27,0,117,0.8); 
transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.latest .swiper-container .swiper-slide .product:hover .txt_area {bottom:0;}
.latest .swiper-container .swiper-slide .txt_area p.sbj {font-size:24px; color:#fff; font-weight:600;}


@media (max-width: 1199px){
	.latest {display:block;}
	.latest header {width:100%; position:relative;}
	.latest header .button-area {position:absolute; right:0; bottom:0;}
	.latest header .button-next, .latest header .button-prev {color:#777; border:1px solid #ccc;}
	.latest header .button-next:hover, .latest header .button-prev:hover {border-color:#b199ff; color:#fff;}
	.latest .swiper-container {width:100%;}
}

@media (max-width: 969px){
	.latest header #tit h3 {font-size:42px;}
	.latest header #tit p {font-size:17px; line-height:26px; margin:20px 0 40px; max-width:50%;}
	.latest header .button-next, .latest header .button-prev {width:50px; height:50px; line-height:48px; font-size:20px;}
	.latest .swiper-container .swiper-slide .txt_area {height:80px; line-height:80px; bottom:-80px;}
	.latest .swiper-container .swiper-slide .txt_area p.sbj {font-size:20px;}
}

@media (max-width: 639px){
	.latest header #tit h3 {font-size:30px;}
	.latest header #tit p {font-size:15px; line-height:22px; margin:15px 0 35px; max-width:100%;}
	.latest header .button-area {top:10px; bottom:auto;}
	.latest header .button-next, .latest header .button-prev {width:auto; height:auto; line-height:20px; padding:0 5px; border-radius:0; color:#fff; font-weight:600; border:none; opacity:0.6;}
	.latest header .button-next:hover, .latest header .button-prev:hover {background:none; opacity:1; border-color:none}
	.latest header .button-prev {margin-right:4px;}
	.latest header .button-prev {margin-right:8px;}
	.latest .swiper-container .swiper-slide .txt_area {height:60px; line-height:60px; bottom:-60px;}
	.latest .swiper-container .swiper-slide .txt_area p.sbj {font-size:17px;}
}



@media (max-width: 399px){
	.latest header #tit h3 {font-size:28px;}
	.latest header #tit p {font-size:14px; line-height:20px; margin:12px 0 30px;}
	.latest .swiper-container .swiper-slide .txt_area {height:54px; line-height:54px; bottom:-54px;}
	.latest .swiper-container .swiper-slide .txt_area p.sbj {font-size:16px;}
}